<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名侦探档案馆管理页面</title>
    <script src="../../resource/vue.js"></script>
    <link rel="stylesheet" href="../../ElementUI/theme-chalk/index.css"/>
    <script src="../../ElementUI/index.js" charset="utf-8"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-aside{
            height: 98vh;
            background-color: #2f3336;
        }
        .logo{
            background-color: #2f3336;
            height: 60px;
        }
        .logo img{
            /*display: block;*/
            width: 168px;
        }
        .el-header{
            background-color: #2f3336;
        }

    </style>
</head>
<body>
<div id="app">

    <el-container style="height: 98vh">
        <el-aside width="200px">
            <div class="logo">
                <img src="../../imgs/logo.png">
            </div>
            <el-menu
                    default-active="3"
                    class="el-menu-vertical-demo"
                    background-color="#2f3336"
                    text-color="#fff"
                    active-text-color="#ffd04b">

                <el-menu-item index="1" @click="userAdmin()">
                    <i class="el-icon-user"></i>
                    <span slot="title">用户管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="animeCharactersAdmin()">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">动漫人物管理</span>
                </el-menu-item>
                <el-menu-item index="3" @click="cartoonAdmin()">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title">动画管理</span>
                </el-menu-item>
                <el-menu-item index="4" @click="theaterAdmin()">
                    <i class="el-icon-video-camera-solid"></i>
                    <span slot="title">剧场版简介</span>
                </el-menu-item>

                <el-menu-item index="5" @click="musicAdmin()">
                    <i class="el-icon-headset"></i>
                    <span slot="title">相关音乐</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="display: flex; justify-content: flex-end; align-items: center;">
                <div class="welcome" style="color: #eee;margin-right: 40px">欢迎{{userName}}登录</div>
                <el-dropdown @command="handleCommand" style="margin-right: 40px;cursor: pointer">
                         <span class="el-dropdown-link">
                             <i class="el-icon-s-home" size="20" style="font-size: 30px"></i>
                         </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="gotohome">进入前台</el-dropdown-item>
                        <el-dropdown-item command="exit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <div class="content" style="height: 580px">
                    <el-card style="width: 100%;height: 100%">
                        动漫管理页面
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </el-container>

</div>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return{
                userName: "",
                role:'',
            }
        },
        methods: {
            handleCommand(command) {
                if(command === "gotohome"){
                    window.location.href = "/html/receptiondesk/index.html";
                }
                if(command === "exit"){
                    localStorage.removeItem('user');
                }
            },
            userAdmin(){
                window.location.href = "/html/admin/admin.html";
            },
            animeCharactersAdmin(){
                window.location.href = "/html/admin/animeCharactersAdmin.html";
            },
            cartoonAdmin(){
                window.location.href = "/html/admin/cartoonAdmin.html";
            },
            theaterAdmin(){
                window.location.href = "/html/admin/theaterAdmin.html";
            },
            musicAdmin(){
                window.location.href = "/html/admin/musicAdmin.html";
            }
        },
        mounted() {
            if (localStorage.getItem('showLoginSuccess') === 'true'){
                this.$message.success('登录成功！');
                localStorage.removeItem('showLoginSuccess');
            }
            this.userName = localStorage.getItem("user");

        },

    })
</script>
</body>
</html>